<template>
  <ps-ocean-bg>
    <div class="container">
      <el-card class="card">
        <el-form ref="form" :rules="rules" :model="formData" label-position="top">
          <el-form-item prop="username">
            <el-input
              class="input_height"
              @keydown="$event => $event.keyCode === 13 && submit()"
              clearable
              size="large"
              v-model.trim="formData.username"
              prefix-icon="User"
              placeholder="请输入用户编号"
            />
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 30px">
            <el-input
              @keydown="$event => $event.keyCode === 13 && submit()"
              show-password
              type="password"
              class="input_height"
              size="large"
              v-model.trim="formData.password"
              prefix-icon="Lock"
              placeholder="用户密码"
            />
          </el-form-item>
        </el-form>

        <el-switch
          size="small"
          v-model="value"
          class="input_height"
          style="margin: 0 30px"
          active-text="记住我"
        />

        <div>
          <el-button
            type="primary"
            style="width: 100%; margin-top: 10px"
            @click="submit"
            class="input_height"
            size="large"
            >登录</el-button
          >
        </div>
      </el-card>

      <div class="avatar">
        <img src="../../assets/image/firmMajordomo.jpg" alt="" />
      </div>
    </div>

    <template #footer>
      <div class="footer">
        <!-- <div class="link">
            <ul>
              <li v-for="(item, index) in links" :key="index">
                <a :href="item.link" target="_blank">{{ item.label }}</a>
              </li>
            </ul>
          </div> -->

        <div>
          <img src="../../assets/image/wxlink.jpg" class="wxlink" />
        </div>

        <div class="desc">
          <!-- <div>
              Copyright © 2023 东莞市彭氏智能科技有限公司 地址：东莞市松山湖
              备案号：粤ICP备2023047547号
            </div> -->
          <div>小程序登录：在微信小程序搜索“企管家ERP系统”即可登录使用，帐号密码与之相同</div>
        </div>
      </div>
    </template>

    <template #left>
      <img class="login_left" src="@/assets/gif/iamge03.gif" alt="" />
    </template>
  </ps-ocean-bg>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import CryptoJS from 'crypto-js'
import { userStore } from '@/pinia/user.js'
import { changeUserStatus } from '@/api/user.js'

const links = ref([
  {
    label: '正航软件下载',
    link: ' http://www.combss.com/bbs/dispbbs.asp?boardid=96&id=7949&page=1&star=1'
  },
  {
    label: '正航APP下载',
    link: ' http://www.chixm.com/app/'
  },
  {
    label: '常用软件下载',
    link: ' http://www.combss.com/bbs/dispbbs.asp?boardid=22&Id=7895'
  }
])

const formData = ref({
  username: '',
  password: ''
})

const rules = ref({
  username: [{ required: true, message: '登陆用户不能为空！', trigger: 'blur' }],
  password: [
    { required: true, message: '登陆密码不能为空！', trigger: 'blur' },
    { min: 6, max: 18, message: '登陆密码长度为6-18位！', trigger: 'blur' }
  ]
})

const secretkey = '🎆🎍jkeof9'
const form = ref()
const value = ref(false)
const router = useRouter()

onMounted(() => {
  const cipherText = localStorage.getItem('name_pass')
  if (cipherText) {
    const a = CryptoJS.AES.decrypt(cipherText, secretkey)
    const _formData = a.toString(CryptoJS.enc.Utf8)
    value.value = true
    formData.value = { ...JSON.parse(_formData) }
  }
})

const userPinia = userStore()

const submit = async () => {
  !value.value && localStorage.removeItem('name_pass')
  value.value &&
    localStorage.setItem(
      'name_pass',
      CryptoJS.AES.encrypt(JSON.stringify(formData.value), secretkey).toString()
    )
  await form.value.validate()
  const result = await userPinia.changeUserInfo(formData.value)
  if (!result) {
    ElMessageBox.confirm('当前账户已登录是否继续登录？', 'Warning', {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await changeUserStatus({ username: formData.value.username })
      await userPinia.changeUserInfo(formData.value)
      ElMessage.success('登录成功')
      router.push('/dashboard')
    })
  } else {
    ElMessage.success('登录成功')
    router.push('/dashboard')
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 400px;
  height: 400px;
  position: absolute;
  right: 20%;
  top: 20%;
  z-index: 2;

  .card {
    width: 100%;
    padding-top: 80px;

    .title {
      font-size: 28px;
      margin-bottom: 30px;
      text-align: center;
      color: var(--el-color-primary);
    }

    .input_height {
      height: 45px;
      font-size: 16px;
    }

    :deep(.el-switch__label) {
      span {
        font-size: 16px;
      }
    }
  }

  .avatar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.footer {
  width: 1240px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  height: 120px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 1;

  font-size: 14px;
  color: #888;
  text-align: center;

  .wxlink {
    width: 80px;
    height: 80px;
  }

  .link {
    width: 100%;
    display: flex;
    justify-content: center;
    ul {
      display: flex;

      li {
        list-style: none;
        padding: 0 10px;
        display: block;

        &::before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin-top: -2px;
          margin-right: 10px;
          width: 1px;
          height: 12px;
          background: #cfcfcf;
        }

        &:first-child::before {
          content: '';
          display: none;
        }

        a {
          color: #888;
          text-decoration: none;

          &:hover {
            color: var(--el-color-primary);
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.login_left {
  position: fixed;
  top: 12%;
  right: 55%;
  width: 400px;
  height: 400px;

  transform: rotate(1);
}
</style>
